<template>
	<view class="page-container">
		
		<!-- 首页顶部栏 -->
		<view class="global-header-bar">
			<!-- <view class="global-header-bar__select">选择城市<text class="icon iconfont">&#xe674;</text></view> -->
			<view class="global-header-bar__search" @click="jumpGlobalSearch">
				<text class="icon iconfont">&#xe686;</text>
				<text class="desc">{{uniHotSearchDefault}}</text>
			</view>
		</view>
		
		<!-- banner -->
		<view v-if="bannerList.length>0" class="banner">
			<swiper class="swiper" indicator-dots="true" indicator-color="rgba(255,255,255,.7)" duration="300" autoplay="true" interval="5000" indicator-active-color="#fff">
				<block v-for="(item,index) in bannerList" :key="index">
					<swiper-item>
						<image @click="toAds(item)" :src="item.adsrc" mode="aspectFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		
		<!-- 首页导航栏开始 -->
		<swiper class="menu-swiper h214" v-if="sHeight == 1 && isSwitch == true" :indicator-dots="navdots" indicator-active-color="#2dbb55" indicator-color="#e5e5e5">
			<block v-for="(item,index) in navList" :key="index">
				<swiper-item class="menu-info clearfix">
					<block v-for="(item1,index1) in item" :key="index1">
						<view class="list-url" @click="toNavPage(item1)">
							<image class="item-pic" :src="item1.m_ico"></image>
							<view class="item-text">{{item1.m_title}}</view>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
			
		<swiper class="menu-swiper h380" v-if="sHeight == 2 && isSwitch == true" :indicator-dots="navdots" indicator-active-color="#2dbb55" indicator-color="#e5e5e5">
			<block v-for="(item,index) in navList" :key="index">
				<swiper-item class="menu-info clearfix">
					<block v-for="(item1,index1) in item" :key="index1">
						<view class="list-url" @click="toNavPage(item1)">
							<image class="item-pic" :src="item1.m_ico"></image>
							<view class="item-text">{{item1.m_title}}</view>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
		
		<swiper class="menu-swiper h416" v-if="sHeight == 3 && isSwitch == true" :indicator-dots="navdots" indicator-active-color="#2dbb55" indicator-color="#e5e5e5">
			<block v-for="(item,index) in navList" :key="index">
				<swiper-item class="menu-info clearfix">
					<block v-for="(item1,index1) in item" :key="index1">
						<view class="list-url" @click="toNavPage(item1)">
							<image class="item-pic" :src="item1.m_ico"></image>
							<view class="item-text">{{item1.m_title}}</view>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
		
		<view class="menu-container" v-for="(item,index) in navList" :key="index" v-if="isSwitch == false">
			<view class="menu-container__item" v-for="citem in item" :key="citem.id" @click="toNavPage(citem)">
				<image class="icon" :src="citem.m_ico" mode="aspectFill"></image>
				<view class="name">{{citem.m_title}}</view>
			</view>
		</view>
		
		<!-- 广告位 -->
		<view class="module-banner" v-if="navAdsList.length > 0">
			<image class="big-item" v-if="navAdsList[0]" @click="toAds(navAdsList[0])" :src="navAdsList[0].adsrc" mode="aspectFill"></image>
			<image class="sma-item" v-if="navAdsList[1]" @click="toAds(navAdsList[1])" :src="navAdsList[1].adsrc" mode="aspectFill"></image>
			<image class="sma-item" v-if="navAdsList[2]" @click="toAds(navAdsList[2])" :src="navAdsList[2].adsrc" mode="aspectFill"></image>
		</view>
		
		<!-- 横幅广告位 -->
		<view class="module-streamer" v-if="navAdsBlist.length > 0">
			<block v-for="item in navAdsBlist" :key="item.id">
				<image class="item" @click="toAds(item)" :src="item.adsrc" mode="aspectFill"></image>
			</block>
		</view>
		
		<!-- 热门产品 -->
		<view class="module-product">
			<view class="module-product-bar" :style="{top: topHeight + 'px'}">
				<v-tabs id="moduleProductTab" class="module-product-tab" auto v-model="tabCurrent"
				 :tabs="tabGroup" :tabsHasKey="true" :field="'attrname'" :lineScale="0.8" :activeColor="activeColor" :lineColor="lineColor"
				 @change="clickTab" v-if="tabGroup.length > 0">
				</v-tabs>
			</view>
			<block v-for="(item,index) in tabGroup" :key="index">
				<view id="moduleProductGroup">
					<block v-if="index == tabCurrent">
						<view class="module-product__group" id="moduleProductGroup">
							<view v-for="(item1,index1) in item.list" :key="index1" @click="toDetail(item1)" class="module-product__group__item">
								<image class="hd" :src="item1.litpic" mode="aspectFill"></image>
								<view class="bd">
									<view class="title">{{item1.title}}</view>
									<view class="info">
										<view v-if="item1.price > 0" class="price"><text class="jg">{{globalExchangeRate}}<text class="num">{{item1.price}}</text></text>起</view>
										<view v-else class="price"><text class="jg"><text class="dx">电询</text></text></view>
										<view class="myd">销量{{item1.sellnum}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="module-more-bar">
							<text @click="toProductIndex(item.typeid)" class="module-more-bar__txt">查看更多</text>
							<text class="module-more-bar__icon iconfont">&#xe68d;</text>
						</view>
					</block>
				</view>
			</block>
		</view>
		
		<!-- 热门游记 -->
		<view class="module-article" v-if="notes.length">
			<view class="module-article__bar" style=" padding-bottom: 0">
				<text class="title">热门游记</text>
			</view>
			<view class="module-article__wrap">
				<view class="note-group">
					<view class="note-group__item" v-for="(item, index) in notes" :key="item.id" @click="toNotesDetail(item.id)">
						<image class="note-group__item__pic" :src="item.litpic" mode="aspectFill"></image>
						<view class="note-group__item__info">
							<view class="title">{{item.title}}</view>
							<view class="glance">{{item.shownum}}人浏览</view>
							<view class="author">
								<view class="lc">
									<image class="icon" :src="item.memberpic" mode="aspectFill"></image>
									<view class="act">
										<view class="name">{{item.nickname}}</view>
										<view class="date">{{item.addtime}}</view>
									</view>
								</view>
								<view class="rc"><text class="iconfont">&#xe687;</text>{{item.read_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="module-more-bar">
				<text @click="toNotesIndex" class="module-more-bar__txt">查看更多热门游记</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>
		
		<!-- 热门攻略 -->
		<view class="module-article" v-if="raiders.length">
			<view class="module-article__bar">
				<text class="title">热门攻略</text>
			</view>
			<view class="module-article__wrap">
				<view class="gonglue-group">
					<view class="gonglue-group__item" v-for="item in raiders" :key="item.id" @click="toRaiderDetail(item.id)">
						<image class="hd" :src="item.litpic" mode="aspectFill"></image>
						<view class="bd">
							<view class="title">{{item.title}}</view>
							<view class="data">
								<view class="label"><text class="iconfont">&#xe62b;</text>{{item.shownum}}</view>
								<view class="label"><text class="iconfont">&#xe625;</text>{{item.commentnum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="module-more-bar">
				<text @click="toRaiderIndex" class="module-more-bar__txt">查看更多热门攻略</text>
				<text class="module-more-bar__icon iconfont">&#xe68d;</text>
			</view>
		</view>
		
		<st-footer-filing></st-footer-filing>
		<!-- 底部备案信息 -->
		
		<st-customize-footer></st-customize-footer>
		<!-- 自定义tabBar -->
		<st-screen-advertising></st-screen-advertising>
		 <!-- 营销推荐 -->	
	</view>
</template>

<script>
	import vTabs from "@/components/v-tabs/v-tabs.vue"
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	import { adsPath, adsClientNo } from '@/utils/ads.js'
	import { getProDetailPage, getProIndexPage } from "@/utils/toPath.js"
	import { check_app_install, check_model_open } from '@/utils/utils.js'
	import global_config from "@/config.js"
	export default {
		components: {
			vTabs,
			stCustomizeFooter
		},
		props: {
			scrollTop: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				topHeight: 0,// 自定义头部总高度
				uniHotSearchDefault: '',
				bannerList: [],
				menu_swiper: 416,
				navdots: false,
				isSwitch: true,
				navList: [], // 导航列表
				navAdsList: [], // 导航下方广告位
				navAdsBlist: [], // 导航下方横幅
				notes: [], // 游记列表
				raiders: [], // 攻略列表
				tabCurrent: 0,
				tabGroup: [],
				activeColor: "#2dbb55",
				lineColor: "#2dbb55",
				moduleTop: 0,
				sHeight: 1,
			}
		},
		created() {
			// #ifndef MP-TOUTIAO
			// 自定义头部总高度
			let {stickyHeight} = getApp().globalData;
			this.topHeight = stickyHeight;
			// #endif
			this.getBanner(); // banner
			this.getIndexNav(); // 首页导航
			this.getNavAd(); // 导航下广告位
			this.getNavBAd();
			this.getHotProductNav(); // 获取热门产品导航
			// 获取游记
			if (this.checkAppInstall('system_notes') && check_model_open(101)) {
				this.getNotes();
			}
			// 获取攻略
			if (this.checkAppInstall('system_article') && check_model_open(4)) {
				this.getRaiders();
			}
			// 全局热搜词
			this.uniHotSearchDefault = uni.getStorageSync('uniHotSearchDefault');
		},
		mounted() {
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.select('#moduleProductGroup').boundingClientRect(res => {
					this.moduleTop = res.top + this.scrollTop - 45;
				}).exec()
			}, 1000)
		},
		methods: {
			
			// 全局搜索
			jumpGlobalSearch() {
				uni.navigateTo({
					url: './search'
				})
			},
			
			// banner
			async getBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_basis_banner'
					}
				res = await this.$http(params);
				if (res.status) {
					this.bannerList = res.data;
				}
			},
			
			// 导航下方广告位
			async getNavAd() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_nav_bottom'
					}
				res = await this.$http(params);
				if (res.status) {
					this.navAdsList = res.data;
				}
			},
			
			// 导航下方横幅
			async getNavBAd() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_nav_single'
					}
				res = await this.$http(params);
				if (res.status) {
					this.navAdsBlist = res.data;
				}
			},
			
			// 前往广告位的页面
			toAds(item) {
				adsPath(item.adtype, item.typeid, item.proid, item.adlink, item.adname);
			},
			
			// 首页导航
			async getIndexNav() {
				let res, client_no = adsClientNo(),
				params = {
					client_no: client_no,
					method: 'api/v2/index/index_nav',
				};
				res = await this.$http(params);
				if (res.status) {
					// 导航初始化
					this.isSwitch = res.data.list.length > 2 ? true : false;
					this.navdots = res.data.list.length > 8 ? true : false;
					this.menu_swiper = res.data.list.length < 5 ? this.sHeight=1 : (res.data.list.length > 8 ? this.sHeight=3 : this.sHeight=2);
					
					let index = 0;
					let newArray = [];
					while (index < res.data.list.length) {
						newArray.push(res.data.list.slice(index, index += 8));
					}
					this.navList = newArray;
				}
			},
			
			// 前往导航所在页面
			toNavPage(item) {
				adsPath(item.type, item.m_typeid, item.product_id, item.m_url, item.m_title);
			},
			
			// 获取热门游记
			async getNotes() {
				let params = {
					method: 'api/v2/index/hot_notes',
					row: 4
				};
				let res = await this.$http(params);
				if (res.status) {
					this.notes = res.data.list;
				}
			},
			
			// 前往游记首页
			toNotesIndex() {
				uni.navigateTo({
					url: '/subPackages/note/index'
				})
			},
			
			// 前往游记详情
			toNotesDetail(id) {
				uni.navigateTo({
					url: `/subPackages/note/detail?id=${id}`
				})
			},
		
			// 前往攻略首页
			toRaiderIndex() {
				uni.navigateTo({
					url: '/subPackages/strategy/index'
				})
			},
			
			// 前往攻略详情
			toRaiderDetail(id) {
				uni.navigateTo({
					url: `/subPackages/strategy/detail?id=${id}`
				})
			},
		
			// 获取热门攻略
			async getRaiders() {
				let params = {
					method: 'api/v2/index/hot_raiders',
					row: 4
				};
				let res = await this.$http(params);
				if (res.status) {
					this.raiders = res.data.list;
				}
			},
			
			// 获取热门产品导航
			async getHotProductNav() {
				let openProduct = global_config.openProduct;
				let openTypeIds = openProduct.join(',');
				if (!openTypeIds) {
					return false;
				}
				let params = {
					method: 'api/v2/index/hot_product_nav',
					row: 100,
					open_type_ids: openTypeIds
				};
				let res = await this.$http(params);
				this.tabGroup = [];
				if (res.status) {
					this.products = res.data;
					this.products.map(item => {
						// #ifdef MP-TOUTIAO
						// 酒店（2）、景点（5）、团购（13）、组合产品（23）、美食（121）
						if(item.m_typeid == 2 || item.m_typeid == 5 || item.m_typeid == 13 || item.m_typeid == 23 || item.m_typeid == 121){
							let tab = {
								id: item.id,
								attrname: item.m_title,
								typeid: item.m_typeid,
								list: ''
							};
							this.tabGroup.push(tab);
						}
						// #endif
						// #ifndef MP-TOUTIAO
						let tab = {
							id: item.id,
							attrname: item.m_title,
							typeid: item.m_typeid,
							list: ''
						};
						this.tabGroup.push(tab);
						// #endif
						
					})
			
					this.tabGroup.map((item, index) => {
						this.clickTab({
							index: index
						})
					})
			
				}
			},
			
			// 切换产品类型
			async clickTab(e) {
				let tabGroup = this.tabGroup;
				let index = e.index;
				if (!tabGroup[index].list) {
					let typeid = tabGroup[index].typeid;
					let params = {
						method: 'api/v2/index/hot_product',
						row: 6,
						typeid: typeid
					};
					let res = await this.$http(params);
					if (res.status) {
						this.tabGroup[index].list = res.data;
					} else {
						this.tabGroup[index].list = [];
					}
				} else {
					uni.pageScrollTo({
						duration: 150,
						scrollTop: this.moduleTop
					})
				}
			},
			
			// 前往产品首页
			toProductIndex(typeid) {
				let path = getProIndexPage(typeid);
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},
			
			// 前往产品详情页面
			toDetail(item) {
				let path;
				path = getProDetailPage(item.typeid, {
					id: item.id
				});
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},
			
			// 检查app是否安装
			checkAppInstall(appname) {
				return check_app_install(appname);
			}
		
		}
	}
</script>

<style lang="scss" scoped>

.global-header-bar {
	padding: 20rpx 24rpx;
	background-color: $uni-bg-color;
	&__select {
		color: $uni-text-color-primary;
		height: 64rpx;
		line-height: 64rpx;
		font-size: $uni-font-size-base;

		.icon {
			vertical-align: middle;
			margin: -2rpx 0 0 6rpx;
		}
	}
	&__search {
		color: $uni-text-color-grey;
		flex: 1 1 auto;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 80rpx;
		font-size: 26rpx;
		background-color: #f6f6f8;
		margin: 0;
		.icon {
			color: #c0c0c0;
			margin-right: 8rpx;
			font-size: $uni-font-size-base;
		}
	}
}

.banner {
	.swiper, image {
		height: 400rpx;
	}
	image {
		display: block;
		width: 100%;
	}
}

// 首页主导航 
.menu-swiper {
	height: 296rpx;
	margin-bottom: 20rpx;
	background: #fff;
}
.menu-swiper.h130 {
	height: 130rpx;
}
.menu-swiper.h214 {
	height: 214rpx!important;
}
.menu-swiper.h380 {
	height: 380rpx!important;
}
.menu-swiper.h416 {
	height: 416rpx!important;
}

.menu-info {
	/* #ifdef MP-WEIXIN || H5 || MP-TOUTIAO || MP-360 || MP-BAIDU || MP-QQ  */ 
	width: 702rpx!important;
	/* #endif */
	/* #ifdef MP-ALIPAY  */ 
	width: 100%!important;
	/* #endif */
		padding: 30rpx 25rpx;
	text-align: center;
}

.menu-info .list-url {
	float: left;
	width: 25%;
	padding: 10rpx 0;
	text-align: center;
}

.menu-info .item-pic {
	display: block;
	width: 100rpx;
	height: 100rpx;
	margin: 0 auto
}

.menu-info .item-text {
	font-size: 24rpx;
	height: 48rpx;
	line-height: 48rpx;
}

.menu-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
	position: absolute;
	width: 100%;
	bottom: 15rpx;
	z-index: 999;
	text-align: center
}

.menu-swiper .uni-swiper-dot {
	display: inline-block;
	width: 14rpx;
	height: 14rpx;
	margin: 0 5rpx;
	position: relative
}

.menu-swiper .uni-swiper-dot::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 14rpx;
	height: 14rpx;
	background: #e5e5e5;
	border-radius: 14rpx;
	transform: translateX(-50%);
	vertical-align: middle
}

.menu-swiper .uni-swiper-dot-active::before {
	width: 29rpx;
	height: 14rpx;
	background: #2dbb55;
}

.uni-swiper-dots-horizontal .uni-swiper-dot:last-child {
	margin-right: 0;
	background: #54e17b !important;
	width: 30rpx !important;
	border-radius: 4px;
}

.menu-container{
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	background-color: $uni-bg-color;
	&__item{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		padding: 20rpx 0;
		position: relative;
		&:after{
			content: "";
			display: inline-block;
			width: 2rpx;
			height: 80rpx;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -40rpx;
			background-color: #e5e5e5;
		}
		.icon{
			width: 100rpx;
			height: 100rpx;
		}
		.name{
			margin-left: 30rpx;
			font-size: 28rpx;
		}
	}
}

.module-banner {
	@include displayflex;
	padding: 24rpx;
	background-color: $uni-bg-color;

	.big-item {
		flex: 0 0 auto;
		width: 346rpx;
		height: 180rpx;
	}

	.sma-item {
		flex: 0 0 auto;
		width: 168rpx;
		height: 180rpx;
		margin-left: 10rpx;
	}
}

.module-streamer{
	padding: 0 24rpx 24rpx;
	margin-top: -14rpx;
	margin-bottom: 20rpx;
	background-color: $uni-bg-color;
	.item{
		width: 702rpx;
		height: 120rpx;
	}
}

.module-article{
	margin-bottom: 20rpx;
	background-color: $uni-bg-color;
	&__bar{
		padding: 24rpx;
		.title{
			font-size: $uni-font-size-lg;
		}
	}
}

.note-group{
	padding: 14rpx 14rpx 14rpx;
	&__item{
		display: inline-block;
		width: 50%;
		padding: 5px;
		vertical-align: top;
		box-sizing: border-box;
		&__pic{
			width: 340rpx;
			height: 230rpx;
		}
		&__info{
			height: 160rpx;
			padding: 20rpx 16rpx;
			.title{
				@include ellipse
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
			.glance{
				color: $uni-text-color-deep;
				margin-bottom: 24rpx;
				font-size: $uni-font-size-mini;
			}
			.author{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.lc{
					flex: 1 1 auto;
					display: flex;
					.icon{
						flex: 0 0 auto;
						width: 56rpx;
						height: 56rpx;
						border-radius: $uni-border-radius-circle;
					}
					.act{
						width: 160rpx;
						margin-left: 12rpx;
						.name{
							white-space: nowrap;
							font-size: $uni-font-size-sm;
							overflow: hidden;
							text-overflow: ellipsis
						}
						.date{
							color: $uni-text-color-deep;
							width: 200%;
							margin-top: -22rpx;
							transform: scale(.5);
							transform-origin: left bottom;
							font-size: 40rpx;
							font-family: Arial, Helvetica, sans-serif;
						}
					}
				}
				.rc{
					.iconfont{
						margin-right: 6rpx;
						font-size: 28rpx;
					}
					flex: 0 0 auto;
					font-size: 26rpx;
					font-family: Arial, Helvetica, sans-serif;
					text-align: right;
				}
			}
		}
	}
}

.gonglue-group{
	padding: 0 24rpx;
	&__item{
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background-color: #f5f5f5;
		&:last-child{
			margin-bottom: 0;
		}
		.hd{
			flex: 0 0 auto;
			width: 220rpx;
			height: 150rpx;
			border-radius: $uni-border-radius-lg;
		}
		.bd{
			flex: 1 1 auto;
			margin-left: 24rpx;
			.title{
				padding-top: 14rpx;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: $uni-font-size-base;
			}
			.data{
				@include displayflex;
				align-items: center;
				margin-top: 20rpx;
				.label{
					color: #bbb;
					width: 120rpx;
					font-family: Arial, Helvetica, sans-serif;
					font-size: 24rpx;
					&:last-child{
						.iconfont{
							font-size: 28rpx;
						}
					}
					.iconfont{
						vertical-align: middle;
						margin: -4rpx 4rpx 0 0;
					}
				}
			}
		}
	}
}

.module-product {
	margin-bottom: 20rpx;
	background-color: $uni-bg-color;
	&__group {
		padding: 14rpx;

		&__item {
			display: inline-block;
			width: 340rpx;
			margin: 10rpx;
			overflow: hidden;
			vertical-align: top;
			border-radius: $uni-border-radius-lg;
			background-color: $uni-bg-color;

			.hd {
				width: 340rpx;
				height: 230rpx;
			}

			.bd {
				.title {
					@include ellipses;
					height: 80rpx;
					padding: 0 12rpx;
					margin-top: 12rpx;
					font-size: $uni-font-size-base;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: $uni-text-color-grey;
					padding: 12rpx;
					font-size: $uni-font-size-mini;
					font-family: Arial, Helvetica, sans-serif;

					.price {
						.jg {
							color: $uni-text-color-price;

							.num {
								font-size: $uni-font-size-lg;
								font-weight: bold;
								font-family: Arial, Helvetica, sans-serif;
							}
							.dx{
								font-size: $uni-font-size-base;
								font-weight: bold;
								font-family: Arial, Helvetica, sans-serif;
							}
						}
					}
				}
			}
		}
	}

	.module-more-bar {
		margin-top: 0;
		border-top: 2rpx solid $uni-border-color;
	}
}

.module-product-bar{
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 0 24rpx;
	background-color: $uni-bg-color;
	&:after{
		content: "";
		display: block;
		height: 2rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		background-color: #e5e5e5;
	}
}

.module-more-bar {
	color: $uni-text-color-primary;
	padding: 24rpx 0;
	text-align: center;

	&__txt {
		display: inline-block;
		vertical-align: middle;
		font-size: $uni-font-size-sm;
	}

	&__icon {
		vertical-align: middle;
		margin: 6rpx 0 0 8rpx;
	}
}
</style>
